<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/common.css">
</head>

<body>

    <!-- 拉动超过一定距离显示的上导航   navigation-->
    <div class="navigation" id="navigation">
        <div class="content">
            <div>
                <a href="">
                    <img src="./assets/images/payment1.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment2.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment3.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/payment4.png" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./assets/images/top1.png" alt="">
                </a>
            </div>




        </div>
    </div>

    <!-- 顶部 -->
    <header class="header">
        <div class="top">

            <!-- 右上角内容 -->
            <div class="leftsup">
                <a href="">
                    <img src="./assets/images/leftsup.png" alt="">
                </a>
            </div>

        </div>
        <div class="bottom">
            <div class="text">
                <div class="text1">支负宝支付</div>
                <div class="text2">
                    <div class="text2-1">牢底坐穿高技术</div>
                </div>
            </div>
            <div class="bg">
                <img src="./assets/images/index-bg-img.png" alt="">
            </div>
        </div>

        <!-- 付款 -->
        <div class="payment">
            <div class="img">
                <div class="img1">
                    <div class="img1-1">
                        <img src="./assets/images/payment1.png" alt="">
                    </div>
                    <div>
                        <span>付款码</span>
                    </div>
                </div>
                <div class="img1">
                    <div class="img1-1">
                        <img src="./assets/images/payment2.png" alt="">
                    </div>
                    <div>
                        <span>扫码</span>
                    </div>
                </div>
                <div class="img1">
                    <div class="img1-1">
                        <img src="./assets/images/payment3.png" alt="">
                    </div>
                    <div>
                        <span>银行卡</span>
                    </div>
                </div>
                <div class="img1">
                    <div class="img1-1">
                        <img src="./assets/images/payment4.png" alt="">
                    </div>
                    <div>
                        <span>收款码</span>
                    </div>
                </div>
            </div>
            <div class="text">
                <div>乘车码</div>
                <div>领券</div>
                <div>优惠券</div>
                <div>附近</div>
            </div>
        </div>
    </header>

    <!-- 包裹下面全部内容的背景 -->
    <div class="f6f6f6">
        <!-- app -->
        <div class="app">
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app1.png" alt="">
                </div>
                <div class="text">
                    <span>金融理财</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app2.png" alt="">
                </div>
                <div class="text">
                    <span>商业保险</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app3.png" alt="">
                </div>
                <div class="text">
                    <span>信用借款</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app4.png" alt="">
                </div>
                <div class="text">
                    <span>火车机票</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app5.png" alt="">
                </div>
                <div class="text">
                    <span>附近景点</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app6.png" alt="">
                </div>
                <div class="text">
                    <span>社会公益</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app7.png" alt="">
                </div>
                <div class="text">
                    <span>社会公益</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app8.png" alt="">
                </div>
                <div class="text">
                    <span>生活缴费</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app9.png" alt="">
                </div>
                <div class="text">
                    <span>电影票</span>
                </div>
            </div>
            <div class="app1">
                <div class="img">
                    <img src="./assets/images/app10.png" alt="">
                </div>
                <div class="text">
                    <span>全部应用</span>
                </div>
            </div>
        </div>

        <!-- 了解详情  particulars -->
        <div class="particulars">
            <div class="box">
                <div class="left">
                    <div>支付</div>
                    <button>了解详情</button>
                </div>
                <div class="right">
                </div>
            </div>
        </div>

        <!-- 热门活动 -->
        <div class="activity">
            <div class="box">
                <div class="title">
                    <div>热门活动</div>
                    <div>周边优惠</div>
                    <div>每日必抢</div>
                </div>
                <div class="content">
                    <div class="text">
                        <div>现金红包</div>
                        <span>10万用户来瓜分</span>
                    </div>
                    <div class="img">
                        <img src="./assets/images/activity1.png" alt="">
                    </div>
                </div>

                <div class="content">
                    <div class="text">
                        <div>要求好友</div>
                        <span>获取支付优惠券</span>
                    </div>
                    <div class="img">
                        <img src="./assets/images/activity2.png" alt="">
                    </div>
                </div>
                <div class="content">
                    <div class="text">
                        <div>金融保险</div>
                        <span>金融保险有保障</span>
                    </div>
                    <div class="img">
                        <img src="./assets/images/activity3.png" alt="">
                    </div>
                </div>
                <div class="content">
                    <div class="text">
                        <div>热门基金</div>
                        <span>带你赚不停</span>
                    </div>
                    <div class="img">
                        <img src="./assets/images/activity4.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!-- 爱上生活 -->
        <div class="live">
            <div class="box">
                <div class="title">
                    <div>爱上生活</div>
                </div>
                <div class="center">
                    <div class="left">
                        <div class="text">牛马视频 视频VIP</div>
                        <button>点击查看</button>
                    </div>
                    <div class="right"></div>
                </div>
                <div class="bottom">
                    <div class="bottom1">
                        <div class="left">
                            <img src="./assets/images/live2.png" alt="">
                        </div>
                        <div class="right">
                            <div>牛马视频</div>
                            <div>好剧享不停</div>
                        </div>
                    </div>
                    <div class="bottom1">
                        <div class="left">
                            <img src="./assets/images/live2.png" alt="">
                        </div>
                        <div class="right">
                            <div>牛马视频</div>
                            <div>好剧享不停</div>
                        </div>
                    </div>
                    <div class="bottom1">
                        <div class="left">
                            <img src="./assets/images/live2.png" alt="">
                        </div>
                        <div class="right">
                            <div>牛马视频</div>
                            <div>好剧享不停</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 周边生活 circum -->
        <div class="circum">
            <div class="box">
                <div class="title">周边生活</div>
                <div class="content">
                    <div class="left">
                        <img src="./assets/images/circum.png" alt="">
                    </div>
                    <div class="right">
                        <div>牛马静吧</div>
                        <div>
                            <span>上海静安区XX路29号</span>
                            <span>36.78km</span>
                        </div>
                        <div>消费满100减20元</div>
                    </div>
                </div>
                <div class="content">
                    <div class="left">
                        <img src="./assets/images/circum.png" alt="">
                    </div>
                    <div class="right">
                        <div>牛马静吧</div>
                        <div>
                            <span>上海静安区XX路29号</span>
                            <span>36.78km</span>
                        </div>
                        <div>消费满100减20元</div>
                    </div>
                </div>
                <div class="content">
                    <div class="left">
                        <img src="./assets/images/circum.png" alt="">
                    </div>
                    <div class="right">
                        <div>牛马静吧</div>
                        <div>
                            <span>上海静安区XX路29号</span>
                            <span>36.78km</span>
                        </div>
                        <div>消费满100减20元</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 底部 -->
    <div class="bottomr">
        <input type="radio" name="ck" id="ck1" hidden>
        <label for="ck1" class="label1">
            <a class="box" href="./index.html">
                <div class="text">首页</div>
            </a>
        </label>


        <input type="radio" name="ck" id="ck2" hidden>
        <label for="ck2" class="label2">
            <a class="box" href="./management.html">
                <div class="text">理财</div>
            </a>
        </label>

        <input type="radio" name="ck" id="ck3" hidden>
        <label for="ck3" class="label3">
            <a class="box" href="./store.html">
                <div class="text">购物</div>
            </a>
        </label>

        <input type="radio" name="ck" id="ck4" hidden>
        <label for="ck4" class="label4">

            <a class="box" href="./information.html">
                <div class="text">消息</div>
            </a>

        </label>

        <input type="radio" name="ck" id="ck5" hidden>
        <label for="ck5" class="label5">
            <a class="box" href="./my.html">
                <div class="text">我的</div>
            </a>
        </label>
    </div>
</body>

</html>
<script src="./assets/js/typeface.js"></script>

<script src="./assets/js/jquery.min.js"></script>
<script>

    // 给页面绑定一个滚动条事件
    $(document).scroll(function () {
        //获取到当前滚动条滚动的位置
        var distance = $(this).scrollTop()
        //当位置 > 200 就显示 返回顶部，小于200 就显示
        if (distance >= 5) {
            //显示返回顶部
            $("#navigation").css({ transform: 'scale(1)', opacity: 1 });

        } else {
            //不显示
            $("#navigation").css({ transform: 'scale(0)', opacity: 0 });
        }
    })
</script>